<template>
    <div>
      <!-- 列表页面 -->
      <div class="container" v-if="!showEdit">
        <div class="header">
          <div class="title">发送对象列表</div>
          <div>
            <el-button plain size="small" type="primary" @click="handleDeleteSuc()">一键清除成功账号</el-button>
            <el-button plain size="small" type="primary" @click="handleDeleteInvalid()">一键清除异常账号</el-button>
            <el-select v-model="search" clearable @change="selectStatus" placeholder="请选择">
              <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </div>
        </div>
        <div class="count" :bind="countsData">账号状态统计：
          <span >未发送:{{countsData.defNum}}&nbsp;&nbsp;&nbsp;</span>
            <span style="color:blue">发送中:{{countsData.preNum}}&nbsp;&nbsp;&nbsp;</span>
            <span >发送成功:{{countsData.sucNum}}&nbsp;&nbsp;&nbsp;</span>
            <span style="color:red">发送异常:{{countsData.invalidNum}}&nbsp;&nbsp;&nbsp;</span>
        </div>
        <!-- 表格 -->
        <el-table :data="tableData" v-loading="loading">
          <el-table-column type="index" :index="indexMethod" label="序号" width="100"></el-table-column>
          <el-table-column prop="username" label="账号"></el-table-column>
          <el-table-column prop="status" label="状态">
            <template #default="scope">
           <span v-if="(scope.row.status == 0)" style="color:black">未发送</span>
            <span v-if="(scope.row.status == 1)" style="color:green">发送中</span>
            <span v-if="(scope.row.status == 2)" style="color:black">发送成功</span>
            <span v-if="(scope.row.status == 4)" style="color:red">发送异常</span>
          </template>
          </el-table-column>
          <el-table-column prop="time" label="最后更新时间"></el-table-column>
          <el-table-column label="操作" fixed="right" width="275">
            <template #default="scope">
              <el-button plain size="small" type="primary" @click="handleEdit(scope.row.id)">编辑</el-button>
              <el-button
                plain
                size="small"
                type="danger"
                @click="handleDelete(scope.row.id)"
                v-permission="{ permission: '删除账号', type: 'disabled' }"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          :background="true"
          :page-size="pageCount"
          :current-page="currentPage"
          v-if="refreshPagination"
          layout="prev, pager, next, jumper"
          :total="totalNums"
        ></el-pagination>
      </div>
      </div>
  
      <!-- 编辑页面 -->
      <receive-modify v-else @editClose="editClose" :editReceiveId="editReceiveId"></receive-modify>
    </div>
  </template>
  
  <script>
  import { computed, onMounted, ref } from 'vue'
  import { ElMessageBox, ElMessage } from 'element-plus'
  import receiveModel from '@/model/receive'
  import ReceiveModify from './receive'

  export default {
    components: {
        ReceiveModify
    },

    data (){
      return {
        search:'',
        countsData:[],
        editReceiveId:null,
        tableData:[],
        loading:false,
        showEdit:false,
        indexMethod:1,
        totalNums: 0,
        currentPage: 1,
        pageCount: 10,
        refreshPagination: true, // 页数增加的时候，因为缓存的缘故，需要刷新Pagination组件
        status: [
        {
          value: '0',
          label: '未发送',
        },
        {
          value: '1',
          label: '发送中',
        },
        {
          value: '2',
          label: '发送成功',
        },
        {
          value: '4',
          label: '发送异常',
        }
      ],

      }
          
    },
    async created() {
        this.loading = true
        this.getReceives()
        this.loading = false
      },
  
    methods: {
     
      async getReceives () {
        try {
          const page = this.currentPage - 1
          const count = this.pageCount
          const receives = await receiveModel.getReceives(page, count)
          const counts = await receiveModel.getCountByStatus()
          this.countsData = counts
          this.tableData = receives.items
          this.totalNums = receives.total
        } catch (error) {
          this.loading = false
          if (error.code === 10020) {
            this.tableData = []
          }
        }
      },

      async selectStatus(value) {
        this.search = value
        const page = this.currentPage - 1
        const count = this.pageCount
        let receives = []
        if(value == ''){
          receives = await receiveModel.getReceives(page, count)
        }else{
          receives = await receiveModel.search({
            status: value,
            page,
            count,
          })
        }
        this.tableData = receives.items
        this.totalNums = receives.total
      },
      async handleCurrentChange(val) {
        this.indexMethod= (val-1)*10+1
        this.currentPage = val
        this.loading = true
        if(this.search == ''){
          this.getReceives()
        }else{
          this.selectStatus(this.search)
        }
        this.loading = false
      },

      handleEdit(id) {
        this.editReceiveId = id
        this.showEdit = true
      },
      editClose() {
        this.showEdit = false
        this.getReceives()
      },
      handleDelete(id) {
        this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(async () => {
          const res = await receiveModel.deleteReceive(id)
          if (res.code < window.MAX_SUCCESS_CODE) {
            this.getReceives()
            this.$message({
              type: 'success',
              message: `${res.message}`,
            })
          }
        })
      },
      
      handleDeleteSuc() {
        this.$confirm('此操作将永久删除成功账号, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(async () => {
          const res = await receiveModel.deleteSuccess()
          if (res.code < window.MAX_SUCCESS_CODE) {
            this.getReceives()
            this.$message({
              type: 'success',
              message: `${res.message}`,
            })
          }
        })
      },

      handleDeleteInvalid() {
        this.$confirm('此操作将永久删除异常账号, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(async () => {
          const res = await receiveModel.deleteInvalid()
          if (res.code < window.MAX_SUCCESS_CODE) {
            this.getReceives()
            this.$message({
              type: 'success',
              message: `${res.message}`,
            })
          }
        })
      }
    },
  }
  </script>
  
  <style lang="scss" scoped>
  .container {
    padding: 0 30px;
  
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
  
      .title {
        height: 59px;
        line-height: 59px;
        color: $parent-title-color;
        font-size: 16px;
        font-weight: 500;
      }
    }

    .count{
      font-size: 14px;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }
  
    .pagination {
      display: flex;
      justify-content: flex-end;
      margin: 20px;
    }
  }
  </style>
  